<template>
  <div>
    <div id="pileBar" ref="pileBar" style="height:300px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'PileBar',
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.pileBar)
      const option = {
        backgroundColor: 'rgb(12,16,61)',
        title: {
          text: '各区清洁取暖替代率',
          top: 16,
          left: 16,
          textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: '14'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          top: 16,
          right: 16,
          textStyle: {
            color: '#fff'
          },
          data: ['2018年', '2019年']
        },
        grid: {
          top: 60,
          left: 16,
          right: 40,
          bottom: 16,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            color: '#fff'
          },
          data: ['福建', '广州', '厦门', '南宁', '背景', '长沙', '重庆']
        },
        series: [
          {
            name: '2018年',
            type: 'bar',
            stack: '总量',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: '#06d3cd'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'insideRight',
                formatter (params) {
                  return params.value + '%'
                }
              }
            },
            z: 10,
            data: [22, 33, 27, 19, 25, 23, 68]
          },
          {
            name: '2019年',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                color: '#ff5624',
                shadowBlur: [0, 0, 0, 10],
                shadowColor: '#ff5624',
                shadowOffsetX: -20
              }
            },
            label: {
              normal: {
                show: true,
                color: '#fff',
                position: 'right',
                formatter (params) {
                  return params.value + '%'
                }
              }
            },
            z: 5,
            data: [32, 50, 48, 66, 37, 44, 80]
          },
          {
            // 灰色背景柱状图
            type: 'bar',
            barGap: '-100%',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: '#ccc',
                barBorderRadius: [20, 20, 20, 20]
              }
            },
            z: -10
          }
        ]
      }
      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
